<template>
  <div class="icons">
    <el-row :gutter="0" class="box">
      <el-col :span="8" :sm="8" :md="6" :lg="4" v-for="(icon, index) in icons" :key="index" >
        <div class="icon-box">
          <el-icon><component :is="icon" /></el-icon>
          <p>{{ icon }}</p>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import {reactive} from 'vue'
import * as jxfIcons from "@/components/jxf/icons";

const icons = reactive([])

for (let icon in jxfIcons) {
  icons.push('jxf-icon'+icon.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase()))
}

</script>

<style lang="scss" scoped>
.icons{
  padding: 15px;
  .box{
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
  }
  .icon-box {
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    color: #666;
    padding:30px 10px;
  }
	.icon-box i {
    font-size: 26px;
    transition: color .15s linear;}
	.icon-box p {
    color: #999;
    margin-top: 15px;
    transition: color .15s linear;
  }
	.icon-box:hover i, .icon-box:hover p {
    color: $base-color;
  }
}

</style>
